<template>
    <div class="container">
        <div class="content">
            <header class="row">
                <h4 class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center">聊天室</h4>
                <span class="text-center col-xs-1 col-sm-1 col-md-1 col-lg-1 col-md-offset-7 col-sm-offset-7 col-xs-offset-7 glyphicon glyphicon-off"></span>
            </header>
            <main class="row">
                <div class=" col-md-offset-1 col-sm-offset-1 col-sm-9 col-md-9 col-lg-9 ">
                    <div class="col-sm-4 col-md-4 col-lg-4 " >   
                        <div :class="['btnGroup',select!=1?'btnGroupE':'']">
                            <router-link to="/addressList"  v-on:click.native="select=1" :class="{btn:true,'btn-primary':select==1?true:false}" >通讯录</router-link>
                            <router-link to="/group" v-on:click.native="select=2" :class="{btn:true,'btn-primary':select==2?true:false}" >群组</router-link>
                            <router-link to="/communication" v-on:click.native="select=3" :class="{btn:true,'btn-primary':select==3?true:false}" >沟通</router-link>
                             <div  v-if="select!=1?true:false">
                                <span class="glyphicon glyphicon-search"></span>
                                <input class="form-control" type="text" :placeholder="select==2?'搜索群组':'搜索沟通'">
                            </div>
                        </div>   
                      
                        <div >
                            <router-view></router-view>
                        </div>
                    </div>
                    <div class="col-sm-8 col-md-8 col-lg-8 ">   
                        <dialogBox :infoHK="select"></dialogBox>
                    </div>
                </div>
            </main>
            <footer>

            </footer>
        </div>
    </div>
</template>
<script>
    import dialogBox from "./components/dialogBox.vue"
    export default{
        data(){
            return {
                select:1
            }
        },
        created(){
            this.$router.push({path: '/addressList'})
        },
        methods:{
            selected:function(e){
                console.log(this)
            }
        },
        components:{
            dialogBox
        }
    }
</script>
<style scoped>
    .container{
        background: #d9edf7
    }

    .container,.content{
        width: 100%;
        height: 100%;
    }
    .content{
        
    }
    header{
        height: 46px;
        color: #fff;
        display: flex;
        align-items: center;
        background: #3498db;
    }
    header>h4{
        margin: 0;
    }
    main{
    }
    main>div{
        background: #fff;
        padding-bottom: 50px;
        border-bottom: 6px solid #3498db;
    }
    .btnGroup{
        height: 100px;
        padding-top: 46px ;
        border-bottom: 2px solid #c3c3c3;
    }
    /* .dialog{
        margin-top: 72px;
    } */
    .btnGroupE{
        height: auto;
    }
    .btnGroupE>div{
        position: relative;
    }
    .btnGroupE>div>span{
        top: 50%;
        left: 13px;
        position:absolute;
        transform: translate(-50%,-50%)

    }
    .btnGroupE>div>input{
        height: 26px;
        margin: 18px 0;
        padding-left: 26px;
    }
</style>



